<!-- 分类内容组件 -->
<template>
  <div class="categorycontent">
    <div class="categoryleft">
      <ul>
        <li
          v-for="(leftlistData, index) in categoryleftlistDatas"
          :class="catId == leftlistData.cat_id ? 'active' : ''"
          :key="leftlistData.cat_id"
          @click="changeTab(leftlistData.cat_id, index)"
        >
          <p v-text="leftlistData.cat_name"></p>
        </li>
      </ul>
    </div>
    <Loading v-if="!showhideloading"></Loading>
    <div class="categoryright wrapper" v-else ref="wrapper">
      <div
        class="right"
        @touchstart="moveStart()"
        @touchend="moveEnd()"
        ref="thistab"
      >
        <div class="adv">
          <img :src="ad.touch_catads" class="img" />
        </div>
        <div
          class="item"
          v-for="rightlistData in categoryrightlistDatas"
          :key="rightlistData.cat_id"
        >
          <div class="tit">
            <i class="row"></i>
            <a href="javascript:;" v-text="rightlistData.cat_name"></a>
          </div>
          <ul>
            <li
              v-for="categoryright in rightlistData.child"
              :key="categoryright.cat_id"
            >
              <router-link
                :to="
                  '/categorylist/' +
                  categoryright.cat_id +
                  '?title=' +
                  categoryright.cat_name
                "
              >
                <img :src="categoryright.touch_icon" />
                <span v-text="categoryright.cat_name"></span>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// import BScroll from "better-scroll";
import Loading from "@/components/Loading";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Loading,
  },
  data() {
    //这里存放数据
    return {
      arrId: ["858", "6", "8", "3", "4", "5", "860"],
      active: 0,
    };
  },
  //监听属性 类似于data概念
  computed: {
    catId() {
      return this.$store.state.cat_id;
    },
    categoryleftlistDatas() {
      return this.$store.state.categorylistData;
    },
    categoryrightlistDatas() {
      return this.$store.state.categoryrightData;
    },
    ad() {
      return this.$store.state.adData;
    },
    showhideloading() {
      return this.$store.state.showloading;
    },
  },
  //监控data中的数据变化
  watch: {
    active() {
      //   this.changeTab();
      this.$store.dispatch(
        "ActchangecategoryrightData",
        this.arrId[this.active]
      );
    },
  },
  //方法集合
  methods: {
    changeTab(cat_id, index) {
      this.$store.dispatch("ActchangecategoryrightData", cat_id);
      this.active = index;
    },
    moveStart() {
      if (event.targetTouches.length == 1 && event.cancelable) {
        let touchY = event.targetTouches[0].pageY;
        let otop = getComputedStyle(this.$refs.thistab).top;
        this.$refs.thistab.ontouchmove = () => {
          return this.moveTo(touchY, otop, this);
        };
      }
    },
    moveTo: (touchY, otop, myvue) => {
      let moveY = event.targetTouches[0].pageY;
      event.preventDefault(); // 阻止浏览器默认事件，重要
      myvue.$refs.thistab.style.top = otop.slice(0, -2) - touchY + moveY + "px";
    },
    moveEnd() {
      let node = this.$refs.thistab;
      if (getComputedStyle(node).top.slice(0, -2) > 0) {
        if (getComputedStyle(node).top.slice(0, -2) > 100 && this.active > 0) {
          this.active--;
          node.style.top = 0 + "px";
          return;
        }
        let y = node.style.top.slice(0, -2) * 0.02;
        let time = setInterval(() => {
          let top = node.style.top.slice(0, -2);
          node.style.top = top - y + "px";
          if (top < 5) {
            node.style.top = "0px";
            clearInterval(time);
          }
        });
      } else if (
        getComputedStyle(node).top.slice(0, -2) <
        -(node.offsetHeight - node.parentNode.offsetHeight)
      ) {
        if (
          getComputedStyle(node).top.slice(0, -2) <
            -(node.offsetHeight - node.parentNode.offsetHeight) - 100 &&
          this.active < this.categoryleftlistDatas.length - 1
        ) {
          this.active++;
          node.style.top = 0 + "px";
          return;
        }
        let y =
          (Number(node.style.top.slice(0, -2)) +
            Number(node.offsetHeight - node.parentNode.offsetHeight)) *
          0.02;
        let time = setInterval(() => {
          let top = node.style.top.slice(0, -2);
          node.style.top = top - y + "px";
          if (top > -(node.offsetHeight - node.parentNode.offsetHeight)) {
            node.style.top =
              -(node.offsetHeight - node.parentNode.offsetHeight) + "px";
            clearInterval(time);
          }
        });
      }
    },
  },
  mounted() {
    this.$store.dispatch("ActchangecategorylistData");
    this.$store.dispatch(
      "ActchangecategoryrightData",
      this.$store.state.cat_id
    );
  },
};
</script>
<style lang="less">
.categorycontent {
  display: flex;
  width: 100%;
  height: calc(100% - 4.4rem);
  .categoryleft {
    background: #fff;
    width: 8.5rem;
    border-right: 0.05rem solid #f5f5f5;
    ul {
      height: 100%;
      list-style: none;
      li {
        display: flex;
        height: 3.8rem;
        align-items: center;
        p {
          width: 100%;
          height: 2rem;
          line-height: 2rem;
          font-size: 1.3rem;
          color: #999;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: center;
        }
      }
      .active p {
        border-left: 0.25rem solid #f23030;
        color: #f23030;
      }
    }
  }
  .categoryright {
    position: relative;
    width: 100%;
    width: calc(100% - 8.4rem);
    background: #fff;
    .right {
      position: absolute;
      .adv {
        display: block;
        overflow: hidden;
        margin-top: 1.1rem;
        border-radius: 0.2rem;
        padding: 0 1.1rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .item {
        overflow: hidden;
        padding: 0 1.1rem;
        margin-bottom: -1.1rem;
        .tit {
          margin: 1.1rem 0;
          position: relative;
          overflow: hidden;
          height: 2.5rem;
          font-size: 1.3rem;
          display: flex;
          align-items: center;
          justify-content: center;
          .row {
            display: block;
            width: 6.5rem;
            height: 0.08rem;
            background: #e0e0e0;
            font-style: normal;
          }
          a {
            min-width: 5rem;
            height: 1.6rem;
            background: #fff;
            line-height: 1.6rem;
            text-align: center;
            overflow: hidden;
            color: #333;
            position: absolute;
          }
        }
        ul {
          overflow: hidden;
          background-color: #fff;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          li {
            width: 33.33%;
            box-sizing: border-box;
            position: relative;
            text-align: center;
            margin-bottom: 2rem;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            a {
              display: block;
              img {
                display: block;
                width: 5.2rem;
                height: 5.2rem;
                overflow: hidden;
                margin: 0 auto;
                border-radius: 0;
              }
              span {
                display: block;
                height: 2rem;
                line-height: 2rem;
                overflow: hidden;
                text-align: center;
                font-size: 1.2rem;
                color: #777;
                margin-top: 1rem;
              }
            }
          }
        }
      }
    }
  }
}
</style>